<template>
  <div class="movieTitle">排片管理</div>
  <el-table
    :data="
      pageData.arrangelist.slice(
        (pageData.current - 1) * pageData.pagesize,
        pageData.current * pageData.pagesize
      )
    "
    style="width: 100%"
  >
    <el-table-column label="序号" width="150">
      <template #default="scope"
        ><span>{{
          (pageData.current - 1) * pageData.pagesize + scope.$index + 1
        }}</span></template
      ></el-table-column
    >
    <el-table-column prop="id" label="ID" width="150" />
    <el-table-column
      prop="chinese_name"
      label="影片名称"
      width="220"
      show-overflow-tooltip
    />
    <el-table-column prop="cname" label="影院" width="200" />
    <el-table-column
      prop="r_name"
      label="影厅"
      width="200"
      show-overflow-tooltip
    />
    <el-table-column
      :formatter="formatterTime"
      prop="time"
      label="时间"
      width="200"
      show-overflow-tooltip
    />
    <el-table-column label="状态" width="200">
      <template v-slot="scope">
        <span v-if="scope.row.state == 1">已排片</span>
        <span v-else>未排片</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="180">
      <template #header>
        <el-button size="small" @click="handleRef()"
          ><el-icon><refresh /></el-icon
        ></el-button>
        <el-button size="small" @click="handleAdd()"
          ><el-icon><plus /></el-icon
        ></el-button>
      </template>
      <template #default="scope">
          <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.row)"
          ><el-icon><Edit /></el-icon
        ></el-button>
        <el-button
          type="primary"
          size="small"
          @click="isArrange(scope.row.id)"
          ><el-icon><Switch /></el-icon>
        </el-button>
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.row.id)"
          ><el-icon><delete /></el-icon
        ></el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--添加排片面版 -->
  <el-dialog v-model="ArrangeVisible" title="添加排片" width="40%" >
    <el-container>
    <el-main style="overflow:hidden">
     <el-row style="padding:10px">
         <el-select
          v-model="updatPlean.Mname"
          value-key="Mname"
          class="m-2"
          placeholder="选择影片"
          size="large"
          @change="clickSelect(updatPlean.Mname)"
        >
          <el-option v-for="item in movieinfo" :key="item.mid" :value="item">
            {{ item.chinese_name }}
          </el-option>
        </el-select>
     </el-row>
    <el-row style="padding:10px">
      <el-select
        v-model="updatPlean.Cname"
        value-key="Cname"
        class="m-2"
        placeholder="选择影院"
        size="large"
        @change="clickSelect(updatPlean.Cname)"
      >
        <el-option
          v-for="item in cinemainfo"
          :key="item.cid"
          :value="item"
        >{{item.cname}}</el-option>
      </el-select>
    </el-row >
    <el-row style="padding:10px">
      <el-select
        v-model="updatPlean.Rname"
        value-key="Rname"
        class="m-2"
        placeholder="选择影厅"
        size="large"
          @change="clickSelect(updatPlean.Rname)"
      >
        <el-option
          v-for="item in roominfo"
          :key="item.rid"
          :value="item"
        >{{item.r_name}}</el-option>
      </el-select>
    </el-row>
    <div class="demo-datetime-picker">
      <el-date-picker
        v-model="times"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD HH:mm:ss"
      />
    </div>
    </el-main>
    <el-aside style="overflow:hidden" >
    <el-card :body-style="{ padding: '0px' } " class="box-card " v-if="updatPlean.url!=''">
      <img :src="updatPlean.url" class="image" />
    </el-card>
     <el-card :body-style="{ padding: '0px' } " class="box-card " v-else>
      <el-empty/>
    </el-card>
    </el-aside>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ArrangeVisible = false">取消</el-button>
        <el-button type="primary" @click="sumitInfo()">添加</el-button>
      </span>
    </template>
  </el-dialog>

  
 <el-dialog v-model="ArrangeUpdateVisible" title="编辑排片" width="40%" >
    <el-container>
    <el-main style="overflow:hidden">
     <el-row style="padding:10px">
         <el-select
          v-model="updatPlean.Mname"
          value-key="Mname"
          class="m-2"
          placeholder="选择影片"
          size="large"
          @change="clickSelect(updatPlean.Mname)"
        >
          <el-option v-for="item in movieinfo" :key="item.mid" :value="item">
            {{ item.chinese_name }}
          </el-option>
        </el-select>
     </el-row>
    <el-row style="padding:10px">
      <el-select
        v-model="updatPlean.Cname"
        value-key="cname"
        class="m-2"
        placeholder="选择影院"
        size="large"
        @change="clickSelect(updatPlean.Cname)"
      >
        <el-option
          v-for="item in cinemainfo"
          :key="item.cid"
          :value="item"
        >{{item.cname}}</el-option>
      </el-select>
    </el-row >
    <el-row style="padding:10px">
      <el-select
        v-model="updatPlean.Rname"
        value-key="r_name"
        class="m-2"
        placeholder="选择影厅"
        size="large"
          @change="clickSelect(updatPlean.Rname)"
      >
        <el-option
          v-for="item in roominfo"
          :key="item.rid"
          :value="item"
        >{{item.r_name}}</el-option>
      </el-select>
    </el-row>
    <div class="demo-datetime-picker">
      <el-date-picker
        v-model="updatPlean.time"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY/MM/DD HH:mm:ss"
      />
    </div>
    </el-main>
    <el-aside style="overflow:hidden" >
    <el-card :body-style="{ padding: '0px' } " class="box-card " v-if="updatPlean.url!=''">
      <img :src="updatPlean.url" class="image" />
    </el-card>
     <el-card :body-style="{ padding: '0px' } " class="box-card " v-else>
      <el-empty/>
    </el-card>
    </el-aside>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ArrangeVisible = false">取消</el-button>
        <el-button type="primary" @click="sumitArrangeInfo()">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!--分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>

<script lang="ts">
import { Delete, Refresh, Edit, Plus,Switch} from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, inject, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { keysOf } from 'element-plus/lib/utils';
export default {
  components: { Delete, Refresh, Edit, Plus,Switch },
  setup() {
    const store = useStore();
    const reload = inject("reload", () => {});
    onMounted(() => {
      handleRefs();
    });

    let ArrangeVisible = ref(false);
    let ArrangeUpdateVisible = ref(false);
    const addArrange = reactive({
      mid:0,
      cid: 0,
      rid: 0,
      time: new Date(),
    });
    const initPlean = () => ({
      Mname:'',
      Cname: '',
      Rname: '',
      time: new Date(),
      url:'',
      movieId:0,
      cinemaId:0,
      roomId:0
    })
    const updatPlean= reactive(initPlean());
    const handleClick = () => {
      console.log("click");
    };
    /**分页 */
    const pageData = reactive({
      current: 1, //当前页
      pagesize: 5, // 当前页显示多少条
      arrangelist: ref([]),
      total: 0, //总数据
    });
    const arr = ref([]);
    const temp = ref([]);
    pageData.arrangelist = computed({
      get: () => {
        return temp.value;
      },
      set: (newvalue) => {
        temp.value = newvalue;
      },
    }) as never;
    /**界面刷新 */
    const handleRefs = () => {
      store.dispatch("SET_ARRANGE").then(() => {
        arr.value = store.state.arrange.arrangeInfo;
        temp.value = arr.value;
        pageData.total = computed(() => {
          return store.state.arrange.arrangeInfo.length;
        }) as never;
      });
      store.dispatch("SET_MOVIELIST").then(() => {
        movieinfo.value = store.state.movie.movieList;
      });
      store.dispatch("SET_ROOM").then(() => {
        roominfo.value = store.state.room.roomInfo;
      });
      store.dispatch("SEA_SELECTMOVIE").then(() => {
        cinemainfo.value = store.state.cinema.cinemaInfo;
      });
    };
    //影片信息
    const movieinfo = ref([]);
    const selectMovie = ref("");
    const imgurl = ref("");
    //房间信息
    const cinemainfo = ref([]);
    const selectCinema = ref("");
    //房间信息
    const roominfo = ref([]);
    const selectRoom = ref("");
    //排片id
    const arrangeId=ref(0)
    const clickSelect=(value:any)=>{
      switch(Object.keys(value)[0]){
        case 'mid':
          updatPlean.Mname=value.chinese_name;
          updatPlean.url=value.img_url;
          updatPlean.movieId=value.mid;
          break;
        case 'id':
          updatPlean.Rname=value.r_name;
           updatPlean.roomId=value.id;
          break;
        case 'cid':
          updatPlean.Cname=value.cname;
          updatPlean.cinemaId=value.cid; 
          break;
      }
      
    }
    const times = ref('')
    const isPlay = ref()
    const sumitInfo =  () => {
      addArrange.mid=updatPlean.movieId,
      addArrange.cid=updatPlean.cinemaId,
      addArrange.rid=updatPlean.roomId,
      addArrange.time=formatterTimes(times.value) as never;
      store.dispatch("SET_ADDARRANGE",addArrange).then(()=>{
        ElMessage.success("排片成功")
      })
      reload();
    };
    const handleRef = async () => {
      reload();
    };
    const handleAdd = () => {
      ArrangeVisible.value = true;
      Object.assign(updatPlean, initPlean())
    };
    const formatterTimes = (datatime:any) => {
      let date = new Date(datatime);
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    };
    const isArrange = (id:number) => {
      store.dispatch("SET_UPDATESTATE",{id:id});
      reload();
    };
    const handleEdit=(row:any)=>{
        ArrangeUpdateVisible.value=true;
        arrangeId.value=row.id;
        updatPlean.Mname=row.chinese_name;
        updatPlean.Cname=row.cname;
        updatPlean.Rname=row.r_name;
        updatPlean.movieId=row.mid;
        updatPlean.cinemaId=row.cid;
        updatPlean.roomId=row.rid;
        updatPlean.time=formatterTimes(row.time) as never;
        movieinfo.value.filter((item:any)=>{
          if(item.chinese_name.indexOf(row.chinese_name)!=-1){
              updatPlean.url=item.img_url;  
        }})
    }
    const sumitArrangeInfo=()=>{
       let updateTemp=reactive({id:arrangeId.value,mid:updatPlean.movieId,cid:updatPlean.cinemaId,rid:updatPlean.roomId,time:formatterTimes(updatPlean.time)});
        store.dispatch("SET_UPDATEARRANGE",updateTemp).then(()=>{
           ArrangeUpdateVisible.value=false;
          ElMessage.success("修改成功")
        });
        reload();
    }
    const handleDelete = async (id:any) => {
       store.dispatch("SET_DELETEARRANGE",{id:id}).then(()=>{
        ElMessage.success("操作成功")
       });
       reload();
    };
    const handleSizeChange = (value: any) => {
      pageData.pagesize = value;
      pageData.arrangelist = [];
      handleRefs();
    };
    const handleCurrentChange = (value: any) => {
      pageData.current = value;
      pageData.arrangelist = [];
      handleRefs();
    };
    const formatterTime = (row: any, column: any) => {
      
      let date = new Date(row[column.property]);
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    };
    return {
      handleSizeChange,
      handleCurrentChange,
      Delete,
      Edit,
      handleClick,
      handleRefs,
      handleRef,
      isArrange,
      handleDelete,
      handleEdit,
      pageData,
      ArrangeVisible,
      handleAdd,
      formatterTime,
      movieinfo,
      selectMovie,
      roominfo,
      selectRoom,
      cinemainfo,
      selectCinema,
      clickSelect,
      imgurl,
      isPlay,
      times,
      sumitInfo,
      ArrangeUpdateVisible,
      updatPlean,
      sumitArrangeInfo
    };
  },
};
</script>
<style scoped>
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.introduction {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.el-table .cell {
  padding: 5px 12px;
}
.el-pagination {
  padding: 50px 10px;
  margin-left: 35rem;
}
.image {
  width: 100%;
  display: block;
}
.box-card {
  width: 80%;;
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding:20px 10px;
  flex-wrap: wrap;
}
</style>
